<template>
	<view class="container">
		<view class="main">
			<view class="safe_bg">
				<view class="safe">
					<image class="icon" src="/static/images/one.png"></image>
					<view class="text">全能保障</view>
				</view>
				<view class="line"></view>
				<view class="safe_item">
					<image class="icon" src="/static/images/one.png"></image>
					<view class="text">迟到必惩</view>
				</view>
				<view class="safe_item">
					<image class="icon" src="/static/images/one.png"></image>
					<view class="text">爽约必保</view>
				</view>
				<view class="safe_item">
					<image class="icon" src="/static/images/one.png"></image>
					<view class="text">加价必赔</view>
				</view>
			</view><!--safe_bg end-->
			<view class="time_bg">
				<view class="left">
					<text class="red">*</text>
					<text class="text">装货时间</text>
				</view>
				<view class="right" @click="showSelectDate()">
					<text class="text" v-if="setup_time != ''">{{setup_time}}</text>
					<text class="text" v-else>请选择装货时间</text>
					<!-- <uni-datetime-picker class="text" :calendarIcon="false" type="datetime" :clearIcon="false" v-model="setup_time" :border="false" @change="change" /> -->
					<image class="arrow" src="/static/images/arrow.png"></image>
				</view>
			</view><!--safe_bg end-->
			<view class="remark_bg">
				<view class="up">
					<view class="left">备注</view>
					<view class="right" @click="openRemark()">
						<view class="text" v-if="selected_show == ''">选填，填写可防止司机误抢</view>
						<view class="text" v-else>{{selected_show}}</view>
						
						<image class="arrow" src="/static/images/arrow.png"></image>
					</view>
				</view>
				<!-- <view class="down">
					<view class="item">三不超</view>
					<view class="item item_selected">到付</view>
					<view class="item">全部现金</view>
					<view class="item">无禁区</view>
					<view class="item item_selected">不用雨布</view>
					<view class="item">到卸</view>
					<view class="item item_selected">好装好卸</view>
					<view class="item">随时装</view>
				</view> -->
			</view><!--remark_bg end-->
			<view class="order_amount" v-if="order_amount > 0">
				<view class="up">
					<view class="left">
						<view class="order">
							<text class="red"></text>
							<text class="text">保证金</text>
						</view>
						<view class="line"></view>
						<text class="input">{{order_amount}}</text>
						<text class="unit">元</text>
					</view>
					<!-- <view class="right">
						<view class="item">退还</view>
						<view class="item">不退还</view>
					</view> -->
				</view>
				<view class="down">
					保证金主要用于保障双方权益，双方均需要交纳。
				</view>
			</view><!-- order_amount end-->
			<view class="amount">
				<view class="up">
					<view class="left">
						<view class="l_info">
							<view class="price_text">
								我的出价
							</view>
							<view class="line"></view>
							<template v-if="is_elec == 0">
								<input class="price_input" v-model="self_amount"></input>
							</template>
							<template v-else>
								<input class="price_input" disabled="true" value="0"></input>
							</template>
						</view>
						<view class="unit">
							元
						</view>
					</view>
					<view class="right" v-if="min_price >= 200" @click="changeElec()" :class="is_elec==1?'sele_elec':''">
						电议
					</view>
				</view>
				<view class="down">
					总运费{{price_show}}元，您的出价过低，找车困难，请提高价格或转电议模式。
				</view>
			</view><!-- amount end-->
			
		</view><!--main end-->
		<view class="footer">
			<view class="submit-btn" @click="submitEvent()">确认发货</view>
		</view>
		
		
		
		<uni-popup ref="pop" class="popup-cls">
			<view class="pop-info">
				<view class="pop-top">
					<view class="cancel" @click="cancel()">
						取消
					</view>
					<view class="title">
						备注
					</view>
					<view class="confirm" @click="confirm()">
						确定
					</view>
				</view>
				<view class="center"> 
					<view class="search_bg">
						<view class="search">
							<textarea class="textarea" placeholder="请输入备注,最多50个字" v-model="selected_show"></textarea>
						</view>
					</view>
					<view class="pop-content" scroll-y="true">
						<view class="section" v-for="item in remarks">
							<view class="cate">{{item.name}}</view>
							<view class="items">
								<block v-for="it in item.children">
									<template v-if="selecteds.includes(it.name)">
										<view class="item item_selected" @click="selectRemark(it)">{{it.name}}</view>
									</template>
									<template v-else>
										<view class="item" @click="selectRemark(it)">{{it.name}}</view>
									</template>
								</block>
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		
		
		<uni-popup ref="timepop" class="popup-cls2">
			<view class="pop-info">
				<view class="pop-top">
					<view class="cancel" @click="cancelTime()">
						取消
					</view>
					<view class="title">
						装货时间
					</view>
					<view class="confirm" @click="confirmTime()">
						确定
					</view>
				</view>
				<view class="center"> 
					<view class="top_bg">
						填写准确装货时间，可防司机误抢哦
					</view>
					<view class="pop-content">
						<scroll-view class="left" scroll-y="true">
							<view class="section" @click="selectDate(item)" :class="left_current==item?'selected':''" v-for="item in leftDate">{{item}}</view>
						</scroll-view>
						<scroll-view class="right" scroll-y="true">
							<view class="section" @click="selectTime(item)" :class="right_current==item?'selected':''" v-for="item in rightTime">{{item}}</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="vippop" class="popup-cls3">
			<view class="pop-info">
				<view class="pop-top">
					<view class="title">
						提示
					</view>
				</view>
				<view class="center"> 
					<view class="top_bg">
						您不是会员，需要交纳单次发布费用{{order_amount}}元。
					</view>
					<view class="pop-content">
						<view class="button cancel" @click="cancelVipPop()">取消</view>
						<view class="button" @click="confirmPublish()">保证金扣除</view>
						<view class="button" @click="gotoVip()">购买会员</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getRemarkTempList,cal_dis_amount} from "@/api/common";
	import {logisticCreate,calAmount} from "@/api/logistic";
	import {checkUserVip} from "@/api/user_common";
	
	export default {
		data() {
			return {
				isPrice:false,
				remarks:[],//备注模板
				selecteds:[],//选择的备注
				selected_show:'',//显示的备注信息
				order_amount:0,//保证金
				setup_time:'',//装货时间
				params:{},
				price_show:0,//预估价格
				min_price:0,
				max_price:0,
				self_amount:0,//
				operationing:false,
				leftDate:[],//左边日期
				left_current:'',//左边日期
				rightTime:[],//右边时间
				right_current:'',//右边日期
				platform_way:0,//平台收费方式：0会员，1是单次支付
				is_elec:0,//是否电议
			}
		},
		onLoad: function(option) {
			this.params = JSON.parse(option.params);
			console.info("参数：",this.params);
			this.loadRemarkTemp();
			this.loadCalPrice();
			this.loadAmount();
		},
		created() {
			//生成时间
			//左边
			var now = new Date();
			this.leftDate.push("今天");
			this.leftDate.push("今明两天均可");
			this.leftDate.push("明天("+this.getDay(1)+")");
			this.leftDate.push("后天("+this.getDay(2)+")");
			this.leftDate.push(this.getDay(3));
			this.leftDate.push(this.getDay(4));
			this.leftDate.push(this.getDay(5));
			this.leftDate.push(this.getDay(6));
			
			this.selectDate("今天");
		},
		methods: {
			changeElec(){
				if(this.is_elec == 0){
					this.is_elec = 1;
				}else{
					this.is_elec = 0;
				}
			},
			confirmPublish(){
				this.$refs.vippop.close();
				this.platform_way = 1;
				this.publish();
			},
			cancelVipPop(){
				this.$refs.vippop.close();
			},
			gotoVip(){
				this.$refs.vippop.close();
				uni.navigateTo({
					url:'/pages/news/vip/vip'
				})
			},
			cancelTime(){
				this.$refs.timepop.close();
			},
			confirmTime(){
				this.$refs.timepop.close();
				this.setup_time = this.left_current + " " + this.right_current;
				
			},
			showSelectDate(){
				this.$refs.timepop.open('bottom');
			},
			selectDate(item){
				this.left_current = item;
				this.right_current = '';
				this.getTime(this.left_current);
			},
			selectTime(item){
				this.right_current = item;
			},
			getDay(add){
				var now = new Date();
				var month = now.getMonth()+1;
				if(month < 10){
					month = "0"+month;
				}
				var tomorrow = new Date(now);
				tomorrow.setDate(now.getDate()+add);
				var day = tomorrow.getDate();
				if(day < 10){
					day = "0"+day;
				}
				return month + '-' + day;
			},
			getTime(date){
				this.rightTime = []; 
				if(date == '今天'){
					// this.rightTime.push('自定义时间');
					this.rightTime.push('上午06:00-12:00');
					this.rightTime.push('下午12:00-18:00');
					this.rightTime.push('晚上18:00-24:00');
					this.rightTime.push('上午10:00');
					this.rightTime.push('上午11:00');
					this.rightTime.push('上午12:00');
					this.rightTime.push('下午13:00');
					this.rightTime.push('下午14:00');
					this.rightTime.push('下午15:00');
					this.rightTime.push('下午16:00');
					this.rightTime.push('下午17:00');
					this.rightTime.push('下午18:00');
					this.rightTime.push('晚上19:00');
					this.rightTime.push('晚上20:00');
					this.rightTime.push('晚上21:00');
					this.rightTime.push('晚上22:00');
					this.rightTime.push('晚上23:00');
					this.rightTime.push('晚上24:00');
				}else if(date == '今明两天均可'){
					this.rightTime.push('随到随装');
					this.rightTime.push('去前联系');
				}else{
					// this.rightTime.push('自定义时间');
					this.rightTime.push('凌晨00:00-06:00');
					this.rightTime.push('上午06:00-12:00');
					this.rightTime.push('下午12:00-18:00');
					this.rightTime.push('晚上18:00-24:00');
					this.rightTime.push('凌晨01:00');
					this.rightTime.push('凌晨02:00');
					this.rightTime.push('凌晨03:00');
					this.rightTime.push('凌晨04:00');
					this.rightTime.push('凌晨05:00');
					this.rightTime.push('凌晨06:00');
					this.rightTime.push('上午07:00');
					this.rightTime.push('上午08:00');
					this.rightTime.push('上午09:00');
					this.rightTime.push('上午10:00');
					this.rightTime.push('上午11:00');
					this.rightTime.push('上午12:00');
					this.rightTime.push('下午13:00');
					this.rightTime.push('下午14:00');
					this.rightTime.push('下午15:00');
					this.rightTime.push('下午16:00');
					this.rightTime.push('下午17:00');
					this.rightTime.push('下午18:00');
					this.rightTime.push('晚上19:00');
					this.rightTime.push('晚上20:00');
					this.rightTime.push('晚上21:00');
					this.rightTime.push('晚上22:00');
					this.rightTime.push('晚上23:00');
					this.rightTime.push('晚上24:00');
				}
			},
			gotoTemplate(){
				uni.navigateTo({
					url:'/pages/news/publish/template/list'
				})
			},
			gotoGoods(){
				uni.navigateTo({
					url:'/pages/news/publish/goods/goods'
				})
			},
			//打开选择备注
			openRemark(){
				this.$refs.pop.open('bottom');
			},
			cancel(){
				this.$refs.pop.close();
			},
			confirm(){
				this.$refs.pop.close();
			},
			//点击选择备注
			selectRemark(n){
				let exists = this.selecteds.indexOf(n.name);
				console.info(exists)
				if(exists !== -1){
					this.selecteds.forEach(item => {
						if(item == n.name){
							this.selecteds.splice(this.selecteds.indexOf(item),1)
						}
					});
				}else{
					this.selecteds.push(n.name);
				}
				this.selected_show = this.selecteds.join('，');
			},
			//获取备注模板
			loadRemarkTemp() {
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				getRemarkTempList({}).then((res) => {
					let data = res.data;
					console.info(data);
					that.remarks = data.list;
					uni.hideLoading();
				});
			},
			//获取保证金
			loadAmount(){
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				cal_dis_amount({'distance':that.params['distance']}).then((res) => {
					let data = res.data;
					if(data.order_amount){
						that.order_amount = parseFloat(data.order_amount).toFixed(2);
					}
					uni.hideLoading();
				});
			},
			//计算预估价格
			loadCalPrice() {
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				calAmount({ids:that.params['car_length_ids'],mile:that.params['distance']}).then((res) => {
					let data = res.data;
					console.info(data);
					that.self_amount = data.min;
					that.min_price = data.min;
					that.max_price = data.max;
					if(that.min_price == that.max_price){
						that.price_show = that.min_price;
					}else{
						that.price_show = that.min_price + "-"+that.max_price;
					}
					uni.hideLoading();
				});
			},
			change(e) {
				this.setup_time = e;
					console.log("-change事件:", e);
				
			},
			//确认下一步
			submitEvent(){
				let that = this;
				if(that.setup_time.length == 0){
					uni.showToast({
						icon:'none',
						title:'请选择装货时间'
					})
					return;
				}
				if(that.operationing)return;
				if(that.self_amount < that.min_price){
					uni.showModal({
					    title: '提示',
					    content: '您的出价过低，确认吗？',
					    success: function (res) {
					        if (res.confirm) {
								that.getCheckUserVip();
					        }//end if
					    }//end success method
					});
				}else{
					that.getCheckUserVip();
				}
			},
			publish(){
				let that = this;
				that.operationing = true;
				console.info(that.params);
				that.params['setup_time'] = that.setup_time;
				that.params['remark'] = that.selected_show;
				that.params['order_amount'] = that.order_amount;
				that.params['eva_price_min'] = that.min_price;
				that.params['eva_price_max'] = that.max_price;
				that.params['self_amount'] = that.self_amount;
				that.params['platform_way'] = that.platform_way;
				that.params['is_elec'] = that.is_elec;
				console.info(that.params);
				uni.showLoading({
					title:'发布中...'
				});
				logisticCreate(that.params).then((res) => {
					uni.hideLoading();
					if(res.status == 200){
						uni.reLaunch({
							url:'/pages/news/publish/result?type=success'
						})
					}
				}).catch(err => {
					that.operationing = false;
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					})
				});
			},//end publish
			getCheckUserVip(){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定发布吗？',
				    success: function (res) {
				        if (res.confirm) {
							uni.showLoading({
								title:'发布中...'
							});
							checkUserVip().then((res) => {
								that.operationing = false;
								uni.hideLoading();
								if(res.data.result == 0){
									that.$refs.vippop.open('center');
								}else{
									that.publish();
								}
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
				        }//end if
				    }//end success method
				});
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f2f2f2;
	}
	.container{
		display: flex;
		flex-direction: column;
		.main{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			margin-bottom: 100;
			
			.safe_bg{
				display: flex;
				flex-direction: row;
				height: 80rpx;
				align-items: center;
				background-color: white;
				padding: 30rpx;
				.safe{
					display: flex;
					flex-direction: row;
					align-items: center;
					.icon{
						width: 40rpx;
						height: 40rpx;
					}
					.text{
						font-size: 28rpx;
						font-weight: bold;
						color: darkorange;
						margin-left: 10rpx;
					}
				}
				.line{
					width: 1rpx;
					height: 28rpx;
					background-color: $uni-main-color;
					margin-left: 10rpx;
				}
				.safe_item{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 20rpx;
					.icon{
						width: 30rpx;
						height: 30rpx;
					}
					.text{
						font-size: 24rpx;
						color: gray;
						margin-left: 5rpx;
					}
				}
			}//safe_bg end
			
			.time_bg{
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 100rpx;
				margin-top: 20rpx;
				background-color: white;
				padding: 30rpx;
				justify-content: space-between;
				.left{
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 150rpx;
					.red{
						color: red;
					}
					.text{
						font-size: 28rpx;
						color: black;
					}
				}
				.right{
					display: flex;
					flex-direction: row;
					align-items: center;
					flex: 1;
					text-align: right;
					justify-content: flex-end;
					margin-left: 20rpx;
					.text{
						font-size: 28rpx;
						color: black;
						margin-right: 20rpx;
					}
					.arrow{
						width: 26rpx;
						height: 26rpx;
					}
				}
			}//time_bg end
			
			.remark_bg{
				display: flex;
				flex-direction: column;
				background-color: white;
				margin-top: 20rpx;
				padding: 30rpx;
				.up{
					display: flex;
					flex-direction: row;
					.left{
						font-size: 28rpx;
						color: black;
						width: 100rpx;
					}
					.right{
						display: flex;
						flex-direction: row;
						align-items: center;
						flex: 1;
						text-align: right;
						justify-content: flex-end;
						margin-left: 20rpx;
						.text{
							font-size: 28rpx;
							color: black;
							margin-right: 20rpx;
						}
						.arrow{
							width: 26rpx;
							height: 26rpx;
						}
					}
				}
				.down{
					margin-top: 40rpx;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.item{
						padding: 10rpx 20rpx;
						color: gray;
						background-color: #f1f1f1;
						border: 1prx solid #f1f1f1;
						margin-right: 10rpx;
						margin-top: 10rpx;
					}
					.item_selected{
						background-color: #faf0e6;
						border: 1rpx solid darkorange;
						color: darkorange;
					}
				}
			}//remark_bg end
			.order_amount{
				display: flex;
				flex-direction: column;
				background-color: white;
				padding: 30rpx;
				margin-top: 20rpx;
				.up{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					height: 60rpx;
					.left{
						display: flex;
						flex-direction: row;
						align-items: center;
						background-color: #f9f9f9;
						height: 60rpx;
						flex: 1;
						.order{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-left: 20rpx;
							.red{
								color: red;
							}
							.text{
								font-size: 28rpx;
								color: black;
							}
							
						}
						.line{
							width: 1rpx;
							height: 30rpx;
							background-color: lightgray;
							margin-left: 20rpx;
						}
						.input{
							flex: 1;
							margin-left: 20rpx;
						}
						.unit{
							font-size: 28rpx;
							color: gray;
							margin-left: 20rpx;
							margin-right: 20rpx;
						}
					}
					.right{
						display: flex;
						flex-direction: row;
						align-items: center;
						.item{
							padding: 0rpx 10rpx;
							height: 60rpx;
							color: gray;
							background-color: #f1f1f1;
							border: 1prx solid #f1f1f1;
							margin-right: 10rpx;
							line-height: 60rpx;
						}
						.item_selected{
							background-color: #faf0e6;
							border: 1rpx solid darkorange;
							color: darkorange;
						}
					}
				}
				.down{
					margin-top: 20rpx;
					background-color: #fcf6f1;
					padding: 20rpx;
					color: darkorange;
				}
			}//order_amount end
			.amount{
				display: flex;
				flex-direction: column;
				background-color: white;
				padding: 30rpx;
				margin-top: 20rpx;
				.up{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						background-color: #f9f9f9;
						padding: 20rpx;
						height: 60rpx;
						flex:1;
						
						.l_info{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-right: 10rpx;
							flex: 1;
							.price_text{
								font-size: 28rpx;
								color: black;
							}
							.line{
								width: 1rpx;
								height: 30rpx;
								background-color: lightgray;
								margin-left: 20rpx;
							}
							.price_input{
								font-size: 28rpx;
								font-weight: bold;
								color: darkorange;
								margin-left: 20rpx;
							}
						}
						.unit{
							font-size: 28rpx;
							color: orange;
						}
					}
					.right{
						margin-left: 30rpx;
						width: 100rpx;
						height: 60rpx;
						color: black;
						border: 1rpx solid #C1C1C1;
						text-align: center;
						line-height: 60rpx;
					}
					.sele_elec{
						border: 1rpx solid #f1ad45;
						color: #f1ad45;
					}
				}
				.down{
					margin-top: 20rpx;
					background-color: #fcf6f1;
					padding: 20rpx;
					color: darkorange;
				}
			}//amount end
			.elec{
				display: flex;
				flex-direction: row;
				background-color: white;
				padding: 30rpx;
				margin-top: 20rpx;
				margin-bottom: 150rpx;
				justify-content: space-between;
				align-items: center;
				.text{
					font-size: 28rpx;
					color: black;
				}
				.btns{
					display: flex;
					flex-direction: row;
					align-items: center;
					.type_btn{
						width: 100rpx;
						height: 60rpx;
						color: black;
						font-size: 28rpx;
						line-height: 60rpx;
						text-align: center;
						background-color: #f2f2f2;
					}
					.btn_selected{
						color: darkorange;
						background-color: blanchedalmond;
					}
				}
				
			}
		}//main end
		
		.footer{
			height: 80rpx;
			width: 100%;
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			.submit-btn{
				background-color: $uni-main-color;
				color: white;
				font-size: 28rpx;
				height: 80rpx;
				width: 100%;
				text-align: center;
				line-height: 80rpx;
			}
		}//footer end
		
		/** 须知弹窗 **/
		.popup-cls{
			display: flex;
			flex-direction: column;
			.pop-info{
				width:100%;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				margin: 0 auto;
				background-color: white;
				.pop-top{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					font-weight: bold;
					margin-top: 20rpx;
					text-align: center;
					border-bottom: 1rpx solid #C1C1C1;
					padding-bottom: 30rpx;
					.cancel{
						font-size: 28rpx;
						color: dimgray;
						margin-left:30rpx;
						height: 60rpx;
						width: 130rpx;
						line-height: 60rpx;
					}
					.title{
						font-size: 30rpx;
						font-weight: bold;
					}
					.confirm{
						background-color: $uni-main-color;
						color: white;
						font-size: 28rpx;
						height: 60rpx;
						width: 130rpx;
						border-radius: 30rpx;
						line-height: 60rpx;
						margin-right:30rpx;
					}
				}
			}
			
			.center{
				margin-top: 30rpx;
				width:100%;
				padding: 0rpx 30rpx;
				display: flex;
				flex-direction: column;
				.search_bg{
					display: flex;
					flex-direction: row;
					.search{
						width: 100%;
						height: 200rpx;
						border-radius: 10rpx;
						border: 1rpx solid #C1C1C1;
						display: flex;
						flex-direction: row;
						align-items: center;
						.textarea{
							flex:1;
							font-size: 28rpx;
							color: black;
							height: 160rpx;
							margin-left: 20rpx;
							margin-right: 20rpx;
						}
					}
				}
				.pop-content{
					display: flex;
					flex-direction: column;
					height: 500rpx;
					margin-top: 30rpx;
					.section{
						display: flex;
						flex-direction: column;
						margin-top: 30rpx;
						.cate{
							font-size: 28rpx;
							font-weight: bold;
						}
						.items{
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							.item{
								padding: 10rpx 20rpx;
								color: gray;
								background-color: #f1f1f1;
								border: 1rpx solid #f1f1f1;
								margin-right: 10rpx;
								margin-top: 10rpx;
							}
							.item_selected{
								background-color: #faf0e6;
								border: 1rpx solid darkorange;
								color: darkorange;
							}
						}
					}
				}
			}
			
		}//popup-cls end
	
		/** 时间弹窗 **/
		.popup-cls2{
			display: flex;
			flex-direction: column;
			.pop-info{
				width:100%;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				margin: 0 auto;
				background-color: white;
				.pop-top{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					font-weight: bold;
					margin-top: 20rpx;
					text-align: center;
					padding-bottom: 30rpx;
					.cancel{
						font-size: 28rpx;
						color: dimgray;
						margin-left:30rpx;
						height: 60rpx;
						width: 130rpx;
						line-height: 60rpx;
					}
					.title{
						font-size: 30rpx;
						font-weight: bold;
					}
					.confirm{
						background-color: $uni-main-color;
						color: white;
						font-size: 28rpx;
						height: 60rpx;
						width: 130rpx;
						border-radius: 30rpx;
						line-height: 60rpx;
						margin-right:30rpx;
					}
				}
			}
			
			.center{
				width:100%;
				display: flex;
				flex-direction: column;
				.top_bg{
					background-color: oldlace;
					height: 80rpx;
					color: darkorange;
					font-size: 30rpx;
					line-height: 80rpx;
					padding-left: 30rpx;
				}
				.pop-content{
					padding: 0rpx 30rpx;
					display: flex;
					flex-direction: row;
					height: 500rpx;
					margin-top: 30rpx;
					.left{
						width: 280rpx;
						background-color: #f8f8f8;
						.section{
							padding-left: 30rpx;
							height: 80rpx;
							color: black;
							font-size: 28rpx;
							background-color: transparent;
							line-height: 80rpx;
						}
						.selected{
							background-color: white;
							color: darkorange;
							font-weight: bold;
						}
					}
					.right{
						margin-left: 30rpx;
						flex: 1;
						background-color: white;
						.section{
							height: 80rpx;
							color: black;
							font-size: 28rpx;
							line-height: 80rpx;
						}
						.selected{
							background-color: white;
							color: darkorange;
							font-weight: bold;
						}
					}
				}
			}
			
		}//popup-cls2 end
		
		/** 确认弹窗 **/
		.popup-cls3{
			display: flex;
			flex-direction: column;
			.pop-info{
				width: 640rpx;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				margin: 0 auto;
				background-color: white;
				.pop-top{
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					margin-top: 20rpx;
					text-align: center;
					border-bottom: 1rpx solid #C1C1C1;
					padding-bottom: 30rpx;
					.title{
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}
			
			.center{
				margin-top: 30rpx;
				width: 640rpx;
				padding: 0rpx 30rpx;
				display: flex;
				flex-direction: column;
				.top_bg{
					font-size: 28rpx;
					color: black;
				}
				.pop-content{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 130rpx;
					padding-bottom: 50rpx;
					
					.button{
						width: 180rpx;
						height:70rpx;
						font-size: 28rpx;
						line-height: 70rpx;
						border-radius: 35rpx;
						color: white;
						text-align: center;
						background-color: #f1ad45;
					}
					.cancel{
						background-color: #f1f1f1;
						color: gray;
					}
				}
			}
			
		}//popup-cls end
	}
	
</style>
